<template>
    <div class="main">
      
      <div class="table" v-for="(order,index) in orderList" :key="order.id" >
        <div class="td acea-row"  v-for="(cart,cIndex) in order.cartInfo" :key="cart.id" >
          <div class="item-1 acea-row">
            <div class="goods acea-row">
              <div class="link">
                  <el-image :src="cart.productInfo.image"  style="width: 100px; height: 100px"  @click.stop=" $router.push({ path: '/detail/' + cart.productInfo.id })"  v-if=" cart.combination_id === 0 &&   cart.bargain_id === 0 &&   cart.seckill_id === 0"></el-image>
                  <el-image :src="cart.productInfo.image"  style="width: 100px; height: 100px" @click.stop=" $router.push({   path: '/activity/group_detail/' + cart.combination_id }) "  v-else-if="cart.combination_id > 0"></el-image>
                  <el-image :src="cart.productInfo.image"  style="width: 100px; height: 100px" @click.stop=" $router.push({   path: '/activity/dargain_detail/' + cart.bargain_id })"  v-else-if="cart.bargain_id > 0"></el-image>
                  <el-image :src="cart.productInfo.image"  style="width: 100px; height: 100px" @click.stop=" $router.push({    path: '/activity/seckill_detail/' + cart.seckill_id })"  v-else-if="cart.seckill_id > 0"></el-image>
              </div>
              <div class="f-fz">{{ cart.productInfo.store_name }}</div>
            </div>
            <div class="cell">
              ￥{{ order.pay_price }}
            </div>
            <div  class="cell c-link"  v-if="order._status._type === 0">
              <div @click="cancelOrder(order)">
                取消订单
              </div>
            </div>
            <div class="cell c-link"  v-if="order._status._type === 1||order._status._type === 2||order._status._type === 3||order._status._type === 4" @click.stop="$router.push({ path: '/detail/' + cart.productInfo.id })">再次购买</div>
          </div>
          <div class="item-2">
              <div class="c-link" @click="paymentTap(order)" v-if="order._status._type === 0">
                  立即付款
              </div>
              <div class="c-link" @click="takeOrder(order)" v-if="order._status._type === 2">
                  确认收货
              </div>
              <div class="c-link" @click="$router.push({ path: '/order/detail/' + order.order_id })" v-if="order._status._type === 3">
              去评价
            </div>
          </div>
          <div class="item-3"  @click="$router.push({ path: '/order/detail/' + order.order_id })">
            查看详情  
          </div>
        </div>
      </div>
      <div class="noCart" v-if="orderList.length === 0 && page > 1">
        <img src="@assets/images/noOrder.png" />
      </div>
      <div class="foot-link" v-else>
        <router-link to="/order/list/0" class="r-link">
          点击查看更多
        </router-link>
      </div>
      </div>
      </template>
      <script>
      import { getOrderData, getOrderList } from "@api/order";
      import {
        cancelOrderHandle,
        payOrderHandle,
        takeOrderHandle
      } from "@libs/order";
      import Loading from "@components/Loading";
      import Payment from "@components/Payment";
      import { mapGetters } from "vuex";
      import { isWeixin } from "@utils";
      
      const STATUS = [
        "待付款",
        "待发货",
        "待收货",
        "待评价",
        "已完成",
        "",
        "",
        "",
        "",
        "待付款"
      ];
      
      const NAME = "MyOrder";
      
      export default {
        name: NAME,
        data() {
          return {
            offlinePayStatus: 2,
            orderData: {},
            tapName:"/order/list/0",
            type: parseInt(this.$route.params.type) || 0,
            page: 1,
            limit: 20,
            loaded: false,
            loading: false,
            orderList: [],
            pay: false,
            payType: ["yue", "weixin"],
            from: isWeixin() ? "weixin" : "weixinh5"
          };
        },
        components: {
          Loading,
          Payment
        },
        computed: mapGetters(["userInfo"]),
        watch: {
          $route(n) {
            if (n.name === NAME) {
              const type = parseInt(this.$route.params.type) || 0;
              if (this.type !== type) {
                this.changeType(type);
              }
              this.getOrderData();
            }
          }
        },
        methods: {
          setOfflinePayStatus: function(status) {
            var that = this;
            that.offlinePayStatus = status;
            if (status === 1) {
              if (that.payType.indexOf("offline") < 0) {
                that.payType.push("offline");
              }
            }
          },
          handleClick(e) {
            this.$router.replace({ path: e.name });
            console.log("STATUS"+e.name)
          },
          myOrder(){
            this.$router.replace({ path: "/order/list/0" });
          },
          getOrderData() {
            getOrderData().then(res => {
              this.orderData = res.data;
            });
          },
          takeOrder(order) {
            takeOrderHandle(order.order_id).finally(() => {
              this.reload();
              this.getOrderData();
            });
          },
          reload() {
            this.changeType(this.type);
          },
          changeType(type) {
            this.type = type;
            this.orderList = [];
            this.page = 1;
            this.loaded = false;
            this.loading = false;
            this.getOrderList();
          },
          getOrderList() {
            if (this.loading || this.loaded) return;
            this.loading = true;
            const { page, limit, type } = this;
            getOrderList({
              page,
              limit,
              type
            }).then(res => {
              this.orderList = this.orderList.concat(res.data);
              this.page++;
              this.loaded = res.data.length < this.limit;
              this.loading = false;
            });
          },
          getStatus(order) {
            return STATUS[order._status._type];
          },
          cancelOrder(order) {
            cancelOrderHandle(order.order_id)
              .then(() => {
                this.orderList.splice(this.orderList.indexOf(order), 1);
              })
              .catch(() => {
                this.reload();
              });
          },
          paymentTap: function(order) {
            var that = this;
            if (
              !(
                order.combination_id > 0 ||
                order.bargain_id > 0 ||
                order.seckill_id > 0
              )
            ) {
              that.setOfflinePayStatus(order.offlinePayStatus);
            }
            this.pay = true;
            this.toPay = type => {
              payOrderHandle(order.order_id, type, that.from)
                .then(() => {
                  const type = parseInt(this.$route.params.type) || 0;
                  that.changeType(type);
                  that.getOrderData();
                })
                .catch(res => {
                  if (res.status === "WECHAT_H5_PAY")
                    return that.$router.push({
                      path: "/order/status/" + order.order_id + "/5"
                    });
                  const type = parseInt(that.$route.params.type) || 0;
                  that.changeType(type);
                  that.getOrderData();
                });
            };
          },
          toPay() {}
        },
        mounted() {
          this.getOrderData();
          this.getOrderList();
          this.$scroll(this.$refs.container, () => {
            !this.loading && this.getOrderList();
          });
        }
      };
      </script>
      
      <style scoped>
          .main {
          width: 848px;
        }
          .main .noCart {
          width: 414px;
          height: 336px;
          margin: 150px auto;
        }
         .main .noCart img {
          width: 100%;
          height: 100%;
        }
          .main .table {
          width: 848px;
          border-top: 1px solid #eaeaea;
        }
         .main .table .tt {
          width: 848px;
          height: 42px;
          font-family: "Microsoft Yahei","微软雅黑",verdana;
          color: #333;
          font-size: 12px;
          text-align: left;
          font-weight: 400;
          line-height: 41px;
          padding-left: 20px;
          
        }
         .main .table .tt .line1 {
          width: 265px;
          margin-left: 10px;
        }
          .main .table .td {
          width: 848px;
          height: 140px;
          padding: 24px 0;
          font-size: 14px;
          font-family: "Microsoft Yahei","微软雅黑",verdana;
          color: #333;
        }
          .main .table .td  .goods {
          width: 338px;
          margin-left: 20px;
        }
          .main .table .td  .goods .link {
          width: 100px;
          height: 100px;
          margin-right: 10px;
      
        }
          .main .table .td  .goods .link  .l-images {
          width: 100px;
          height: 100px;
          cursor: pointer;
        }
          .main .table .td  .goods .f-fz {
          width: 215px;
          height: 38px;
          overflow: hidden; /*自动隐藏文字*/
          text-overflow: ellipsis;/*文字隐藏后添加省略号*/
          margin:  auto 0;
        }
          .main .table .td .cell {
          width: 100px;
          height: 19px;
          text-align: center;
          line-height: 19px;
          margin: auto 0;
        }
          .main .table .td .c-link {
          cursor: pointer;
          color: #69c;
        }
          .main .table .td .item-1 {
          width: 575px;
        }
       .main .table .td .item-2 {
          width: 114px;
          margin: auto 0;
          text-align: center;
        }
          .main .table .td .item-3 {
          width: 114px;
          margin: auto 0;
          text-align: center;
          cursor: pointer;
          color: #69c;
        }
        .foot-link {
        width: 850px;
        height: 43px;
        border-top: none;
        border-top: 1px solid #eaeaea;
        line-height: 42px;
        text-align: center;
        font-size: 14px;
      }
      .foot-link:hover {
        color: #CC9756;
      }
      </style>
      